<template>
  <div class="zscbbg">
    <!-- 标题 -->
    <head-main :headimg="headimg" :btname="btname" :btrouter="btrouter" />
    <!-- 弹窗提示确认 -->
    <div class="yytcbox" v-show="!shownr">
      <img src="@/images/yytcbg.png" alt="" />
      <div class="yytdes">
        <img src="@/images/yytc.png" alt="" />
        <p>
          医学营养治疗是糖尿病的基础管理措施，旨在帮助患者制定营养计划，形成
          良好的饮食习惯，确定合理的总能量摄入，合理均衡分配各种营养物质，恢
          复并维持理想体重。
        </p>
      </div>
      <div class="tool yzboxqd" @click="shownr = true">
        <img src="@/images/qd.png" alt="" class="active" />
        <img src="@/images/qdac.png" alt="" class="normal" />
      </div>
    </div>
    <!-- 任务栏task -->
    <div class="taskbox" v-show="shownr">
      <div
        class="task"
        v-for="item in task"
        :key="item.id"
        @click="step = item.id"
      >
        <img src="@/images/taskbg.png" alt="" />
        <span class="taskspan">{{ item.name }}</span>
        <img
          src="@/images/taskjx.png"
          alt=""
          class="taskzt"
          v-show="item.id == step"
        />
        <img
          src="@/images/taskover.png"
          alt=""
          class="taskzt"
          v-show="step > item.id"
        />
      </div>
    </div>
    <!-- 内容展示da -->
    <div class="nrzsboxd" v-show="step == 1 && steps == 1 && shownr">
      <!-- 选项卡 -->
      <div class="xxkbox">
        <div class="xxk" :class="stepx == 1 ? 'xxks' : ''" @click="stepx = 1">
          常见的体重计算方法知识点展示
        </div>
        <div class="xxk" :class="stepx == 2 ? 'xxks' : ''" @click="stepx = 2">
          课堂小测试（{{ tstep }}/{{ qustion.length }}）
        </div>
        <!-- <div
          class="xxk"
          v-for="item in xxkdata"
          :key="item.id"
          :class="stepx == item.id ? 'xxks' : ''"
          @click="stepx = item.id"
         
        >
          {{ item.name }}
        </div> -->
      </div>
      <!-- 内容展示 -->
      <div class="nrzsbox beautifulScroll" v-show="stepx == 1">
        <span class="nrbt">常用的体重计算方法：</span>
        <div class="nglr">
          <p>1.科学计算法 体重指数计算法：</p>
          <p>
            体重指数（BMI）=体重（千克）/身高（米）的平方 2.简便计算法（常用）：
          </p>
          <p>标准体重＝身高－105（公斤） 3.精细计算法：</p>
          <p>标准体重：【身高（厘米）-100】*0.9（男性）</p>
          <p>标准体重：【身高（厘米）-100】*0.85（女性）</p>
          <p>根据科学计算方法得出的身体指数（BMI）与下表进行比较。</p>
          <p>
            体质类型 偏瘦 正常 超重 肥胖 BMI指数 ＜ 18.5 18.5-23.9 24-27.9 >28
            根据简便计算法与精细计算法，实际体重大于或者小于标准体重的10％，属于正常；低于10％为偏瘦，高于10％为超重；低于20％为消瘦，高于
            20％为肥胖。
          </p>
          <p>
            举例糖尿病病友王先生：男性，45岁，身高175厘米，体重85千克，办公室工作。
          </p>
          <p>标准体重：标准体重（千克）=身高（厘米）-105=175-105=72（千克）</p>
          <p>
            评价体重：（实际体重-理想体重）÷理想体重×100%=（85-70）÷70×100%=21%超出标准体重的20%，为肥胖
          </p>

          <p>
            体重指数：体重（千克）/身高（米）的平方=85÷1.752=27.76，在24.0～27.9之间属于超重，按肥胖计算。
          </p>
        </div>
      </div>
      <div class="nrzsbox beautifulScroll" v-show="stepx == 2">
        <!-- 题目主体 -->
        <div
          class="choicebox choiceboxs"
          v-show="tstep == item.id"
          v-for="item in qustion"
          :key="item.id"
        >
          <div>
            <span>{{ item.id }}. ({{ item.name }}){{ item.question }}</span>
          </div>
          <!-- 题目选项 -->
          <el-checkbox-group
            v-model="checkList"
            @change="statusChange(item)"
            :disabled="elcheckjy"
          >
            <div class="df">
              <el-checkbox
                v-for="items in item.options"
                :key="items.id"
                :label="items.id"
                ><div class="">
                  <div class="tmoption tmoptions">{{ items.name }}</div>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
          <!-- 是否正确提示 -->
          <div class="" v-show="right">回答正确</div>

          <div class="" v-show="erro && item.name != '连线题'">
            回答错误，正确答案{{ answer }}
          </div>
          <!-- 题目解析 -->
          <div class="tmjx" v-show="tmjxshow">
            <img
              src="@/images/closeck.png"
              alt=""
              class="tmjxclose"
              @click="tmjxshow = false"
            />
            <span>题目解析：</span>
            <div class="beautifulScroll tmjxdes">{{ item.des }}</div>
          </div>
          <!-- 上一步 -->
          <div class="tool pretool" @click="preornex('1')" v-show="tstep != 1">
            <img src="@/images/press.png" alt="" class="active" />
            <img src="@/images/press.png" alt="" class="normal" />
          </div>
          <!-- 下一步 -->
          <div
            class="nextool tool"
            @click="preornex('2')"
            v-show="step != qustion.length"
          >
            <img src="@/images/nexs.png" alt="" class="active" />
            <img src="@/images/nexs.png" alt="" class="normal" />
          </div>
          <!-- 下一步判断 -->
          <div class="tmb">
            <!-- 查看解析 确定 -->
            <div class="ckbox">
              <!-- <div class="tool ck" @click="tmjxshow = true">
                <img src="@/images/ckjx.png" alt="" class="active" />
                <img src="@/images/ckjxac.png" alt="" class="normal" />
              </div> -->
              <div class="tool ck" @click="yzFn(item)" v-show="qdshow">
                <img src="@/images/qd.png" alt="" class="active" />
                <img src="@/images/qdac.png" alt="" class="normal" />
              </div>
              <div
                class="tool ck"
                @click="nextx()"
                v-show="item.id == qustion.length && !qdshow"
              >
                <img src="@/images/jx.png" alt="" class="active" />
                <img src="@/images/jx.png" alt="" class="normal" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="nrzsboxd" v-show="step == 2 && steps == 2 && shownr">
      <!-- 选项卡 -->
      <div class="xxkbox">
        <div
          class="xxk"
          v-for="item in xxkdata2"
          :key="item.id"
          :class="stepx == item.id ? 'xxks' : ''"
          @click="stepx = item.id"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 内容展示 -->
      <div class="nrzsbox beautifulScroll" v-show="stepx == 1">
        <span class="nrbt"
          >1.判断劳动强度 中国营养学会提出的体力劳动强度分级参考表
        </span>
        <div class="nglr">
          <p>
            （1）轻体力劳动：坐姿：打字、缝纫等手工作业或腿的轻度活动；立姿：如上臂用力为主的装配工作、教师、售货员等。
          </p>
          <p>
            （2）中体力劳动：如锯木头，卡车、拖拉机或建筑设备等运输操作，
            锻造，风动工具操作，粉刷，间断搬运中等重物，除草，锄田，摘水果和蔬菜等，学生的日常活动也属于中等体力劳动。
          </p>
          <p>
            （3）重体力劳动：如体育运动、搬运重物、锤锻、锯刨或凿硬木、割草、挖掘等。
          </p>
        </div>
      </div>
      <div class="nrzsbox beautifulScroll zscenter" v-show="stepx == 2">
        <img src="@/images/cnrl.png" alt="" />
      </div>
      <div class="nrzsbox beautifulScroll" v-show="stepx == 3">
        <span class="nrbt">3.计算每日所需总热量</span>
        <div class="nglr">
          <p>公式：每日所需要的总热量 = 理想体重×每公斤体重需要的热量</p>
          <p>举例说明：</p>
          <p>
            某女士，35岁，身高165cm，体重65kg，从事办公室工作，1型，患病5年，一直采用饮食、运动控制，胰岛素戴泵治疗，无明显并发症。
          </p>
          <p>
            这位女士的标准体重=165-105=60kg
            BMI=65÷(1.65×1.65)=23.9,属于正常，办公室为轻体力劳动，对应的热量为30千卡
            每日所需总热量=60×30=1800（千卡/日）
          </p>
        </div>
      </div>
    </div>
    <div class="nrzsboxd" v-show="step == 3 && steps == 3 && shownr">
      <!-- 选项卡 -->
      <div class="xxkbox">
        <div
          class="xxk"
          v-for="item in xxkdata3"
          :key="item.id"
          :class="stepx == item.id ? 'xxks' : ''"
          @click="stepx = item.id"
        >
          {{ item.name }}
        </div>
      </div>
      <!-- 内容展示 -->
      <div class="nrzsbox beautifulScroll" v-show="stepx == 1">
        <span class="nrbt">1.确定食物交换份数 </span>
        <div class="nglr">
          <!--  -->
          <p>
            食物交换份法是以每个交换份食物能供给90千卡能量为依据，同类食物进行交换的方法。
          </p>
          <p>
            谷薯类、蔬菜、水果类、豆制品、奶制品、肉蛋鱼类、坚果类和油脂类8类食物（见表1），每份食物供给的能量相近均为90千卡，但重量不同。食物交换份数的计算公式为:
            食物交换份数=每日所需总热量÷90。
          </p>
          <p>例如1800千卡能量摄入患者应该摄入1800÷90=20份食物。</p>
          <img src="@/images/8lsw.png" alt="" />
        </div>
      </div>
      <div class="nrzsbox beautifulScroll" v-show="stepx == 2">
        <div class="nglr zscenter">
          <!--  -->
          <p class="textalignp">
            为满足糖尿病患者血糖控制和营养均衡，《中国2型糖尿病膳食指南》建议三大营养素提供的能量应占每日总热量的比值为碳水化合物占50%~60%，蛋白质占15%~20%，脂肪占25%~30%。可计算具体三大营养素的每日食物交换份数
            (见表2)。
          </p>
          <img src="@/images/b2.png" alt="" />
          <p class="textalignp">
            三大营养素的食物交换份数
            例如，1800千卡能量摄入患者应该摄入20份食物，其中，
            碳水化合物交换份数=20x(50%~60%)
            =10~12份，可以是3份谷薯类主食，6份蔬菜,2份水果类，
            蛋白质交换份数=20x (15%~20%)
            =3~6份，可以是2份豆制品，1份奶制品:脂肪交换份数=20x(25%~30%)
            =5~6份，可以是2份油脂，4份肉蛋鱼类。
          </p>
        </div>
      </div>
      <div class="nrzsbox beautifulScroll" v-show="stepx == 3">
        <div class="nglr zscenter">
          <!--  -->
          <p class="textalignp">
            进行食物的餐次分配。一般建议按照早餐吃1/5，午餐和晚餐各吃2/5，或一日三餐中每餐各占1/3。
          </p>

          <p class="textalignp">
            注射胰岛素或口服降糖药等易出现低血糖的患者，可在正餐中匀出小部分食物作为两正餐之间的加餐。不同热量糖尿病患者饮食餐次分配的食物交换份数(见表3)。
            表3
          </p>
          <img src="@/images/sada.png" alt="" />
          <p class="textalignp">
            不同热量糖尿病饮食餐次分配的食物交换份数
            对于每种食物的选择，可以挑选更加适合糖尿病患者的食物种类 (见表4) 表4
          </p>
          <img src="@/images/swll.png" alt="" />
          <p class="textalignp">
            糖尿病患者适宜摄入食物种类 例如:
            根据餐次分配情况，1800千卡能量摄入患者三餐摄入情况可以为:
            早餐吃1份主食，2份蔬菜，1份奶制品，共4份食物；
            午餐、晚餐各吃1份主食，2份蔬菜，1份豆制品，2份肉蛋类，1份油脂，每餐7份食物，2份水果或坚果可在两餐之间或晚睡前食用，整日摄入共20份食物
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headMain from './headMain.vue'
export default {
  components: { headMain },
  name: 'WorkspaceJsonZsCb',
  data() {
    return {
      elcheckjy: false,
      shownr: false,
      btname: '知识储备',
      btrouter: 'mK2',
      headimg: require('@/images/yyxzl.png'),
      step: 1, //大步骤
      steps: 1, //小步骤
      stepx: 1,
      tstep: 1, //题目
      checkList: [],
      tmjxshow: false,
      right: false,
      erro: false,
      answer: '',
      lxname: '',
      lxnameimg: null,
      lximgbs: '',
      qdshow: true,
      task: [
        {
          id: 1,
          name: '计算体重'
        },
        {
          id: 2,
          name: '计算总热量'
        },
        {
          id: 3,
          name: '热量分配'
        }
      ],
      xxkdata: [
        {
          id: 1,
          name: '常见的体重计算方法知识点展示'
        },
        {
          id: 2,
          name: '课堂小测试'
        }
      ],
      xxkdata2: [
        {
          id: 1,
          name: '判断劳动强度'
        },
        {
          id: 2,
          name: '判断每日每千克标准体重需要的热量'
        },
        {
          id: 3,
          name: '计算每日所需总热量'
        }
      ],
      xxkdata3: [
        {
          id: 1,
          name: '确定食物交换份数'
        },
        {
          id: 2,
          name: '确定三大营养素的食物交换份数'
        },
        {
          id: 3,
          name: '分配每餐的交换份数，列出食谱'
        }
      ],
      qustion: [
        {
          id: 1, //题目id
          name: '单选题', //题目类型
          question: '糖尿病患者的理想体重(Kg)计算公式为', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A. 身高（cm）－100' // 题目选项
            },
            {
              id: 'B', //题目选项id
              name: 'B. 身高（cm）－105' // 题目选项
            },
            {
              id: 'C', //题目选项id
              name: 'C. 身高（cm）－110' // 题目选项
            },
            {
              id: 'D', //题目选项id
              name: 'D. 身高（cm）－115' // 题目选项
            }
          ],
          answer: ['B'], //正确答案
          des: '' //答案解析表述
        },
        {
          id: 2, //题目id
          name: '单选题', //题目类型
          question: '如何评价目前体重情况', //题目名称
          options: [
            {
              id: 'A', //题目选项id
              name: 'A.（实际体重-标准体重）/标准体重' // 题目选项
            },
            {
              id: 'B', //题目选项id
              name: 'B.（实际体重-标准体重）/实际体重' // 题目选项
            },
            {
              id: 'C', //题目选项id
              name: 'C.（标准体重-实际体重）/实际体重' // 题目选项
            },
            {
              id: 'D', //题目选项id
              name: 'D.（标准体重-实际体重）/标准体重' // 题目选项
            }
          ],
          answer: ['A'], //正确答案
          des: '' //答案解析表述
        }
      ]
    }
  },

  mounted() {},
  watch: {
    step: {
      handler(item, olditem) {
        console.log(item, olditem)
        this.steps = item
      }
    },
    steps: {
      handler(item, olditem) {
        console.log(item, olditem)
      }
    }
  },
  methods: {
    // 判断点的那一个线
    lxtfn(i, id) {
      this.lxname = i
      this.lximgbs = id
      // let flag = this.rightImages.some((item) => {})
      this.rightImages.forEach((item) => {
        if (item.img == this.leftImages[id].img) {
          this.lxname = ''
          this.lximgbs = ''
          console.log('存在重复线')
          return
        }
      })
    },
    // 验证连线题
    lxtfnyz(i, id) {
      console.log('点击的连接线', this.lximgbs, this.lxname, id)
      // console.log('点击的空白', this.rightImages[id])
      if (this.lxname != '') {
        if (this.lxname == i) {
          // console.log('连接正确')
          this.rightImages[id].img = this.leftImages[this.lximgbs].img
          this.lxname = ''
          this.lximgbs = ''
        } else {
          this.rightImages[id].img = this.leftImages[this.lximgbs].img
          this.lxname = ''
          this.lximgbs = ''
          // console.log('链接错误')
        }
      }
    },

    //控制可以选几个
    statusChange(item) {
      if (item.name == '单选题' || item.name == '判断题') {
        if (this.checkList.length > 1) {
          this.checkList.splice(0, 1)
        }
      }
    },
    //验证答案
    yzFn(item) {
      if (this.qustion.length == item.id) {
        this.qdshow = false
        console.log(this.qdshow)
      }
      if (this.checkList.length != 0 && this.tmjxshow == false) {
        //
        this.elcheckjy = true
        this.right = false
        this.erro = false
        this.audioUrl = ''
        this.answer = ''
        if (item.name == '单选题' || item.name == '判断题') {
          this.checkList.forEach((items) => {
            item.answer.find((itemx) => {
              if (itemx == items) {
                //单选题正确
                this.right = true
                this.erro = false
                this.answer = itemx
                return
              } else {
                this.right = false
                this.erro = true
                this.answer = itemx
                //单选题正确 错误
                return
              }
            })
          })
        }
        if (item.name == '多选题') {
          if (this.checkList == null || this.checkList == '') {
            this.right = false
            this.answer = this.answer + item.answer
            this.erro = true
          }
          if (this.checkList.length < item.answer.length) {
            this.right = false
            this.answer = this.answer + item.answer
            this.erro = true
          } else {
            const isCorrect = this.checkList.every((answer) =>
              item.answer.includes(answer)
            )

            if (isCorrect) {
              //多选题回答正确
              this.right = true
              this.erro = false
              this.answer = this.answer + item.answer
            } else {
              //多选题回答错误
              this.right = false
              this.answer = this.answer + item.answer
              this.erro = true
            }
          }
        }
      } else {
        //长度==0 没选择直接全错
        if (item.name == '连线题') {
          this.zqdan.forEach((item) => {
            this.rightImages.forEach((items) => {
              if (item.name != items.name) {
                this.right = false
                this.erro = true
                // this.answer = 'itemx'
              } else {
                this.right = true
                this.erro = false
                // this.answer = 'itemx'
              }
            })
          })
        }
      }
    },
    // 切换上下题目
    preornex(i) {
      // if (this.question.length == this.step) {
      //   this.qdshow = false
      // }
      if (this.tmjxshow == false) {
        this.qdshow = true
        this.right = false
        this.erro = false
        this.elcheckjy = false
        this.checkList = []
        if (i == 1 && this.tstep >= 1) {
          this.tstep = this.tstep - 1
          console.log(this.qustion.length)
        } else if (i == 2 && this.tstep <= this.qustion.length) {
          this.tstep = this.tstep + 1
        }
      }
    },
    // 继续
    nextx() {
      this.$emit('tmwc')
    }
  }
}
</script>

<style>
.el-checkbox__inner {
  display: none !important;
}
.el-checkbox__input {
  display: none !important;
}
.el-checkbox__label {
  height: 78px !important;
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.df .el-checkbox__input.is-checked + .el-checkbox__label {
  background-color: #0f709a;
  color: #ffffff;
  border-radius: 5px;
  height: 78px;
}
.el-checkbox:last-of-type {
  margin-right: 30px !important;
}
.el-checkbox {
  display: flex;
  flex-direction: column;
  color: black;
}
</style>
